From 6fd414cd56d4f443b2298b97a52378d40916394e Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Tue, 24 Jan 2017 15:13:56 +0530 Subject: [PATCH] GallerySlideshow: Always set image height, adjust according to caption size When the size of the caption changes (for example one word vs four lines) the content below jumps because of the space the caption is taking. We now adjust the height of the image based on the height of the caption to avoid jumping. Bug: T140596 Change-Id: I567652ff8b1483cef474493dd5bd790e95288b30 --- .../src/mediawiki/page/gallery-slideshow.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/resources/src/mediawiki/page/gallery-slideshow.js b/resources/src/mediawiki/page/gallery-slideshow.js index e651c9cc96..3cb8e9d8e8 100644 --- a/resources/src/mediawiki/page/gallery-slideshow.js +++ b/resources/src/mediawiki/page/gallery-slideshow.js @@ -232,11 +232,7 @@ .removeAttr( 'height' ); // Stretch image to take up the required size - if ( this.$thumbnail.width() > this.$thumbnail.height() ) { - this.$img.attr( 'width', this.imageWidth + 'px' ); - } else { - this.$img.attr( 'height', this.imageHeight + 'px' ); - } + this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' ); // Make the image smaller in case the current image // size is larger than the original file size. @@ -262,25 +258,28 @@ var imageLi = this.getCurrentImage(), caption = imageLi.find( '.gallerytext' ); - // Highlight current thumbnail + // The order of the following is important for size calculations + // 1. Highlight current thumbnail this.$gallery .find( '.gallerybox.slideshow-current' ) .removeClass( 'slideshow-current' ); imageLi.addClass( 'slideshow-current' ); - // Show thumbnail stretched to the right size while the image loads + // 2. Show thumbnail this.$thumbnail = imageLi.find( 'img' ); this.$img.attr( 'src', this.$thumbnail.attr( 'src' ) ); this.$img.attr( 'alt', this.$thumbnail.attr( 'alt' ) ); this.$imgLink.attr( 'href', imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) ); - this.setImageSize(); - // Copy caption + // 3. Copy caption this.$imgCaption .empty() .append( caption.clone() ); - // Load image at the required size + // 4. Stretch thumbnail to correct size + this.setImageSize(); + + // 5. Load image at the required size this.loadImage( this.$thumbnail ).done( function ( info, $img ) { // Show this image to the user only if its still the current one if ( this.$thumbnail.attr( 'src' ) === $img.attr( 'src' ) ) { -- 2.20.1